<template>
  <div class="theColor">
    <lotteryHeader></lotteryHeader>
    <div class="theColorBox">
      <div class="lotteryColorW displayFlex theColorLBox">
        <div class="colorOfList">
          <colorOfList></colorOfList>
        </div>
        <div class="colorOfContent scrollBar relative" :class="{noScroll:isStop}">
          <div class="colorTheAn colorTheAnPad displayFlex" v-if="$route.query.id!='0'&&$route.name != 'theResults'">
            <p class="icon"></p>
            <vue-seamless-scroll :data="colorTheData" :class-option="classOption" class="vueSeamless">
              <ul class="colorTheAnContent" id="marquee">
                <router-link :to="{name:'systemOf',query:{id:'-100',n:'2',noticeId:txt.id}}" v-for="(txt,txtIndex) in colorTheData" tag='li' :key="txtIndex">{{txt.title}}
                </router-link>
              </ul>
            </vue-seamless-scroll>
          </div>
          <colorOfContent></colorOfContent>
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
          <div class="stopScaleBox" v-if="isStop&&$route.name != 'theColor'&&$route.name != 'theResults'">
            <img class="absmiddle" :src="stopImg" alt="">
          </div>
        </div>
      </div>
     <!-- <div class="fullScreenBox" v-if="isFullScreen($route.query.code)">
        <div class="colorOfContent scrollBar relative" :class="{noScroll:isStop}">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
          <div class="stopScaleBox" v-if="isStop&&$route.name != 'theColor'">
            <img class="absmiddle" :src="stopImg" alt="">
          </div>
        </div>
      </div>-->
    </div>
    <homeFooter class="footerFixed"></homeFooter>
  </div>

</template>

<script>
  import './theColor.scss';
  import './color/transfer/officialList/navNum.scss';
  import lotteryHeader from '../../components/lotteryColor/header/index';
  import colorOfList from '../../components/lotteryColor/lotteryTree/index';
  import colorOfContent from './colorOfContent';
  import homeFooter from '../../components/footer/index';
  import {mapState} from 'vuex';

  export default {
    data() {
      return {
        /*公告数据*/
        colorTheData: [],
        isStop:false,//是否停售
        stopImg:require('../../assets/images/theColor/header/stopImg.png'),
      }
    },
    computed: {
      classOption() {
        return {
          step: 1,
          limitMoveNum: 1,
          singleHeight: 40,
          waitTime: 1000,
          direction: 1,
          hoverStop: true, //是否开启鼠标悬停stop
        }
      },
      ...mapState({
        recordColorData: state => state.mutations.recordColorData,
      })
    },
    activated() {
      this.init();
    },
    deactivated(){
      this.isStop = false;
    },
    mounted() {
      let that = this;
      $(window).resize(function () {
        that.calculationVal();
      })
    },
    methods: {
      init() {
        let that = this;
        that.calculationVal();
      },
      calculationVal() {
        let height = $(window).height();
        $('.colorOfContent').height(height - 71-68+10);
      }
    },
    components: {
      lotteryHeader,
      colorOfList,
      colorOfContent,
      homeFooter
    },
    watch: {
      'recordColorData': {
        handler: function (val) {
          //获取公告数据
          let colorData = JSON.parse(JSON.stringify(this.recordColorData[parseInt(this.$route.query.code)].data||{}));
          this.colorTheData = JSON.parse(JSON.stringify(this.recordColorData[parseInt(this.$route.query.code)].data.noticeList||[{}]));
          $('.colorOfContent').scrollTop(0);
          this.isStop = colorData.status=='2'?true:false;
        },
        deep: true
      },
    }
  }
</script>

<style scoped>
  body {
    background: #fff;
  }
</style>
